'use client'
import Image from "next/image";
import KFImg from '@/app/assets/images/kefu.png'
import classNames from "classnames";
import anime from "animejs";
import styles from './index.module.css'
import { useRef } from "react";

export default function WebSiteToolbar() {
  const serviceRef = useRef<HTMLDivElement>(null)
  const animateRef = useRef<anime.AnimeParams>();
  
  function onMouseEnter(e: React.MouseEvent) {
    if (serviceRef.current) {
      const elm = serviceRef.current;
      elm.style.transform = 'translateY(20px)';
      elm.style.display = 'block';
      animateRef.current = anime({
        targets: elm,
        duration: 300,
        opacity: [0, 1],
        autoplay: true,
        easing: 'easeInOutQuad',
        translateY: 0
      })
    }
  } 

  function onMouseLeave(e: React.MouseEvent) {
    if (serviceRef.current) {
      animateRef.current?.pause()
      const elm = serviceRef.current;
      elm.style.display = 'none';
    }
  }

  function onScrollTop() {
    window.scrollTo({ top: 0, behavior: 'smooth' })
  }

  return (
    <div className="fixed right-1 top-1/3 w-[3rem] z-200">
      <div className="w-[3rem] overflow-hidden">
        <Image src={KFImg} alt="客服" className="ml-2" />
      </div>
      <div className={classNames("bg-white shadow pt-2 pb-2 pl-1 pr-1 rounded", styles.toolWraper)}>
        <div 
        onMouseEnter={onMouseEnter}
        onMouseLeave={onMouseLeave}
        className="flex flex-col justify-center items-center cursor-pointer hover:bg-blue-800 relative">
          <i className="iconfont icon-kefu"></i>
          <span>客服</span>

          <div ref={serviceRef} className="absolute hidden p-2 right-[40px] top-[-8px] w-[14rem] ">
            <div className="shadow rounded-sm bg-white p-2">
              <div className="text-xs p-1">
                <span className="text-sm font-bold">咨询热线：</span> 023-6751 3560
              </div>
              <div className="h-[1px] bg-gray-200 mt-1 mb-1"></div>
              <div className="text-xs p-1">
                <span className="text-sm font-bold">QQ客服：</span> 023-6751 3560
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className={classNames("bg-white shadow pt-1 pb-1 pl-1 pr-1 mt-1 rounded")}>
        <div
        onClick={onScrollTop} 
        className={classNames('flex flex-col justify-center cursor-pointer items-center hover:bg-blue-800', styles.bottom)}>
          <i className="iconfont icon-fanhuidingbu text-gray-500"></i>
          <span className="text-xs">置顶</span>
        </div>
      </div>
    </div>
  )
}